# Integrate with Playwright

import { PackageManagerTabs } from '@theme';

[Playwright.js](https://playwright.com/) is an open-source automation library developed by Microsoft, primarily designed for end-to-end testing and web scraping of web applications.

We assume you already have a project with Playwright.

:::info Demo Project
you can check the demo project of Playwright here: [https://github.com/web-infra-dev/midscene-example/blob/main/playwright-demo](https://github.com/web-infra-dev/midscene-example/blob/main/playwright-demo)
:::

## Preparation

Config the OpenAI API key, or [config model and provider](./model-provider)

```bash
# replace with your own
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
```

## Step 1. install dependency, update configuration

add the dependency

<PackageManagerTabs command="install @midscene/web --save-dev" />

update playwright.config.ts

```diff
export default defineConfig({
  testDir: './e2e',
+ timeout: 90 * 1000,
+ reporter: [["list"], ["@midscene/web/playwright-report"]],
});
```

## Step 2. extend the `test` instance

Save the following code as `./e2e/fixture.ts`;

```typescript
import { test as base } from '@playwright/test';
import type { PlayWrightAiFixtureType } from '@midscene/web/playwright';
import { PlaywrightAiFixture } from '@midscene/web/playwright';

export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture());
```

## Step 3. write the test case

Save the following code as `./e2e/ebay-search.spec.ts`

```typescript title="./e2e/ebay-search.spec.ts"
import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page }) => {
  page.setViewportSize({ width: 1280, height: 800 });
  await page.goto("https://www.ebay.com");
  await page.waitForLoadState("networkidle");
});

test("search headphone on ebay", async ({ ai, aiQuery, aiAssert }) => {
  // 👀 type keywords, perform a search
  await ai('type "Headphones" in search box, hit Enter');

  // 👀 find the items
  const items = await aiQuery(
    "{itemTitle: string, price: Number}[], find item in list and corresponding price"
  );

  console.log("headphones in stock", items);
  expect(items?.length).toBeGreaterThan(0);

  // 👀 assert by AI
  await aiAssert("There is a category filter on the left");
});
```

For the agent's more APIs, please refer to [API](./API).

## Step 4. run the test case

```bash
npx playwright test ./e2e/ebay-search.spec.ts
```

## Step 5. view test report

After the above command executes successfully, the console will output: `Midscene - report file updated: ./current_cwd/midscene_run/report/some_id.html`. You can open this file in a browser to view the report.

## More

You may also be interested in [Prompting Tips](./prompting-tips)